
{% if site.change-date-bg %}
<div class="post-box">
{% if post.categories %}
<div class="ribbon"><span>{{post.categories | first}}</span></div>
{% endif %}
<div class="post-meta" style="background: {{site.color-1}};background: -webkit-linear-gradient(to top, {{site.color-1}} , {{site.color-2}});background: linear-gradient(to top, {{site.color-1}} , {{site.color-2}});"><h1 class="date">{{ post.date | date: "%-d" }}</h1>
<span>{{ post.date | date: "%b" }}</span></div>
<div class="post-title-box">
<p class="post-link">{{ post.title | truncate: 40 }}</p>
<p class="post-excerpt">{{ post.description | strip_html | truncate: 120 }}</p>
</div>
</div>

{% else %}


<div class="post-box">
{% if post.categories %}
<div class="ribbon"><span>{{post.categories | first}}</span></div>
{% endif %}
<div class="post-meta"><h1 class="date">{{ post.date | date: "%-d" }}</h1>
<span>{{ post.date | date: "%b" }}</span></div>
<div class="post-title-box">
<p class="post-link">{{ post.title | truncate: 40 }}</p>
<p class="post-excerpt">{{ post.description | strip_html | truncate: 120 }}</p>
</div>
</div>
{% endif %}


{% if site.change-date-bg %}
<style>
.ribbon span {
  background: {{site.color-2}};
  background: linear-gradient({{site.color-2}} 0%, {{site.color-1}} 100%);
}
.ribbon span::before {
  border-left: 3px solid {{site.color-1}};
  border-top: 3px solid {{site.color-1}};
}
.ribbon span::after {
  border-right: 3px solid {{site.color-1}};
  border-top: 3px solid {{site.color-1}};
}
</style>
{% endif %}
